<template>
	<view class="Jgoods_wp">
		<view class="Jgoods_nav" v-if="Jpic.shoppic">
			<image :src="Jpic.shoppic" mode="widthFix"></image>
			<text @click="$navTo('/pages/goodlist/goodlist')">更多 > </text>
		</view>
		<view class="Jgoods_lists">
			<view class="Jgoods_list_item" v-for="item in Jinfo" @click="$navTo('/pages/product/product?id='+item.id)">
				<view class="Jgoods_list_image">
					<image :src="item.thumb" ></image>
					<image class="j_baoyou" v-if="item.isnosend!='0'" src="/static/baoyou_image.png" ></image>
				</view>
				<text class="Jgoods_list_item_name clamp2">
					<image class="j_image" v-if="item.isnosend!='0'" src="/static/baoyou.png" ></image>
					<image class="j_image" v-if="item.istime!='0'" src="/static/miao.png" ></image>
					<image class="j_image" v-if="item.ishot!='0'" src="/static/remai.png" ></image>
					<image class="j_image" v-if="item.isdiscount!='0'" src="/static/tejia.png" ></image>
					<image class="j_image" v-if="item.iscomment!='0'" src="/static/tuijian.png" ></image>
					{{item.title}}
				</text>
				<view class="item_productprice">￥{{item.productprice}}</view>
				<view class="Jgoods_list_item_money">
					<text class="Jgoods_list_item_money_price2" v-if="item.usecredit=='0'">{{item.saleprice}}</text>
					<text class="Jgoods_list_item_money_price"
						v-if="item.usecredit!='0'">{{(item.saleprice-item.usecredit).toFixed(1)}}</text>
					<text class="Jgoods_list_item_money_price1" v-if="item.usecredit!='0'">{{item.usecredit}}</text>
					<text class="Jgoods_list_item_money_price3">￥{{item.saleprice}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Jswiper from '@/components-home/pages/Jswiper.vue'
	import WaterfallFlow from '@/components/nairenk-waterfall-flow.vue'
	export default {
		components: {
			Jswiper,
			WaterfallFlow
		},
		props: {
			Jpic: {
				type: Object,
				default: () => {
					return {
						shoppic: ''
					}
				}
			},
			Jinfo: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				GnavList: ['为你推荐', '爆品上新', '低价抢购', '团购包邮'],
				IndexNum: 0,
			}
		},
		methods: {
			tabClick(e) {
				this.IndexNum = e;
				this.$emit('Jchange', {
					type: 'Jgoods',
					data: e
				})
			},
			choose(e) {
				this.$navTo('/pages/product/product?id=' + e.id);
			}
		}
	}
</script>

<style lang="scss">
	.Jgoods_wp {
		color: #303133;
		font-size: 28upx;
		position: relative;
		padding-bottom: 200upx;
	}

	.Jgoods_nav {
		position: relative;
		padding: 0 20upx;
		width: 100%;
	}

	.Jgoods_nav image {
		width: 100%;
	}

	.Jgoods_nav text {
		color: $base-color;
		position: absolute;
		right: 30upx;
		top: 50%;
		transform: translateY(-50%);
		text-align: right;
		width: 100upx;
	}

	.Jgoods_lists {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 10upx;
	}

	.Jgoods_list_item {
		background-color: #fff;
		border-radius: 20upx;
		box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);
		padding-bottom: 20upx;
		margin: 0 10upx 20upx;
		width: calc(50% - 20upx);
	}

	.Jgoods_list_item image {
		border-radius: 20upx;
		width: 100%;
		height: calc(50vw - 30upx);
	}

	.Jgoods_list_item_name {
		font-weight: bold;
		line-height: 35upx;
		height: 70upx;
		padding: 0 10upx;
		overflow: hidden;
	}

	.item_productprice {
		color: #606266;
		font-size: 26upx;
		text-decoration: line-through;
	}

	.Jgoods_list_item_money {
		padding: 6upx 10upx 0;
		height: 40upx;
		line-height: 40upx;
	}

	.Jgoods_list_item_money_price,
	.Jgoods_list_item_money_price1,
	.Jgoods_list_item_money_price2 {
		color: $bg-color;
		font-size: 30upx;
		font-weight: bold;
		margin-right: 8upx;
	}

	.Jgoods_list_item_money_price2:after {
		content: '米券';
		font-size: 22upx;
	}

	.Jgoods_list_item_money_price::after {
		content: '元';
		font-size: 22upx;
	}

	.Jgoods_list_item_money_price1::after {
		content: '米券';
		font-size: 22upx;
	}

	.Jgoods_list_item_money_price1:before {
		content: '+ ';
		font-size: 22upx;
	}

	.Jgoods_list_item_money_price3 {
		color: $font-color-light;
		font-size: $font-sm;
		margin-left: 5upx;
	}

	.Jgoods_list_item_money_produ {
		color: #C0C4CC;
		font-size: 22upx;
		text-decoration: line-through;
	}

	.Jgoods_list_image {
		position: relative;
	}

	.Jgoods_list_item .j_baoyou {
		height: 100upx;
		width: 100upx;
		position: absolute;
		bottom: 20upx;
		left: 10upx;
	}

	.Jgoods_list_item .j_image {
		height: 28upx;
		width: 48upx;
		margin-right: 4upx;
		vertical-align: middle;
	}
</style>
